<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.io.File"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-首页</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<style type="text/css">
html, body {
	height: 100%;
	margin: 0px;
}
/*去掉a标签的下划线*/
a {
	text-decoration: none;
	margin: 5px
}
/*搜索框的样式*/
.searchDiv {
	position: fixed;
	top: 30%;
	left: 30%;
	width: 40%;
}
#searchInput {
	width: calc(100% - 100px);
	height: 50px;
	font-size: 20px;
	border: white 1px solid;
	border-radius: 25px;
	outline: none;
	padding-left: 50px;
	padding-right: 50px;
	text-align: center;
	color: white;
	/*设置搜索框透明*/
	background-color: transparent
}
/*搜索框内小图标样式*/
.searchDiv img {
	border-radius: 15px;
	/*设置图标透明*/
	opacity: 0
}
.searchDiv > a {
	position: absolute;
	top: 12px;
	right: 10px;
	margin: 0px;
}
/*右上角小图标样式*/
.index {
	padding: 10px;
}
.index img {
	border-radius: 15px
}
/*壁纸中心div的样式*/
.wallpaperCenter {
	width: 100%;
	height: calc(100% - 80px);
	position: fixed;
	bottom: 100%;
	left: 0px;
	background-color: white;
	overflow: auto;
	padding: 15px 0px;
}
/*壁纸中心里面的图标的样式*/
.wallpaperCenter img {
	width: calc(25% - 34px);
	height: 30%;
	border-radius: 10px;
	margin: 10px;
}
/*搜索候选项div的样式*/
.candidateDiv {
	width: 40%;
	position: fixed;
	top: calc(30% + 60px);
	left: 30%;
	text-align: center
}
/*搜索候选项div里面的p标签的样式*/
.candidateDiv p {
	margin: 5px
}
/*搜索候选项a标签的样式*/
.candidateA {
	display: none;
	color: white
}
</style>
<script>
	//获得其他页面跳转过来时携带的信息
	var msg = "${param.msg}"
	//用来判断是不是访问社区的变量
	var isGoCommunity = "false";
	//实时显示搜索候选项
	function getSearchCandidate() {
		//获取搜索范围
		var searchRange = $("[name='searchRange']").val();
		//若用户没有登陆，且搜索范围选择的是搜自己，则不提供搜索候选项
		if ("${sessionScope.user.userName}" == "" && searchRange == "searchSelf") return;
		//获取输入框的值
		var word = $("#searchInput").val();
		//让搜索候选项a标签不显示，并且删掉innerHTML
		$(".candidateA").each(function() {
			$(this)[0].innerHTML = "";
			$(this)[0].style.display = "none";
		});
		//判断搜索框是否为空格的正则表达式
		var regex = /^[ ]+$/;
		//判断搜索框里是否为空，若为空，则不执行查询候选项操作
		if (word == "" || regex.test(word)) return;
		//创建数组存放相应搜索范围内的笔记所有标题
		var recordTitles = new Array();
		if (searchRange == "searchSelf") {
			<c:forEach var="recordTitle" items="${selfRecordTitles}">
			recordTitles.push("${recordTitle}");
			</c:forEach>
		} else if (searchRange == "searchCommunity") {
			<c:forEach var="recordTitle" items="${communityRecordTitles}">
			recordTitles.push("${recordTitle}");
			</c:forEach>
		}
		//创建数组存储搜索候选项
		var candidates = new Array();
		//根据搜索关键词获取搜索候选项并存入数组
		for (var i = 0; i < recordTitles.length && candidates.length < 10; i++)
			if (recordTitles[i].search(word) != -1) candidates.push(recordTitles[i]);
		//让搜索候选项a标签显示，并且为innerHTML赋值
		for (var i = 0; i < candidates.length; i++) {
			$(".candidateA")[i].innerHTML = candidates[i];
			$(".candidateA")[i].style.display = "inline";
		}
	}
	//通过搜索候选项搜索
	function searchCandidate(value) {
		//获取点击的搜索候选项的搜索关键词
		var word = $(".candidateA")[value].innerHTML;
		//给搜索框赋值
		$("#searchInput").val(word);
		//提交搜索
		$(".searchForm").submit();
		return false;
	}
	//打开壁纸中心
	function openWallpaperCenter() {
		//更换右上角的小图标为返回图标
		$(".index")[0].style.display = "none";
		$(".goBack")[0].style.display = "";
		//壁纸中心div降落
		wallpaperCenterDown();
		//判断是否已经获取过壁纸中心的壁纸的icon
		if ($(".wallpaperCenter img").attr("src") == null) {
			//将所有壁纸图标放入wallpaperCenter下面的img中
			$(".wallpaperCenter img").each(function() {
				$(this).attr("src", "${pageContext.request.contextPath}/wallpaper/icon/" + $(this).attr("name"));
			});
		}
		return false;
	}
	//关闭壁纸中心
	function closeWallpaperCenter() {
		//更换右上角小图标
		$(".index")[0].style.display = "";
		$(".goBack")[0].style.display = "none";
		//壁纸中心div升起
		wallpaperCenterUp();
		return false;
	}
	//切换壁纸
	function changeWallpaper(wallpaperName) {
		//更换body的背景图片
		$("body").attr("background", "${pageContext.request.contextPath}/wallpaper/" + wallpaperName);
		//关闭壁纸中心
		closeWallpaperCenter();
		//将选择的壁纸name保存至cookie
		$.ajax({
			url : "${pageContext.request.contextPath}/changeWallpaper",
			type : "post",
			data : JSON.stringify({
				wallpaperName : wallpaperName
			}),
			contentType : "application/json;charset=UTF-8"
		});
		return false;
	}
	//切换搜索范围
	function changeSearchRange(value) {
		//更换搜索范围
		$("[name='searchRange']").val(value);
		//更换显示的搜索范围图标
		$(".searchSelf")[0].style.display = "none";
		$(".searchCommunity")[0].style.display = "none";
		$("." + value)[0].style.display = "";
		//重新获取搜索候选项
		getSearchCandidate();
		return false;
	}
	//自执行函数
	$(function() {
		//获取壁纸
		$.ajax({
			url : "${pageContext.request.contextPath}/getWallpaperName",
			type : "post",
			dataType : "text",
			success : function(data) {
				$("body").attr("background", "${pageContext.request.contextPath}/wallpaper/" + data);
			}
		});
		//修改地址栏里的地址
		history.pushState(null, null, "${pageContext.request.contextPath}/index");
		//根据其他页面跳转过来时携带的信息做出相应的提示
		if (msg == "logoutSuccess") alert("已退出登录");
		//为搜索框添加鼠标移入移入事件
		$("#searchInput").mouseover(function() {
			//让搜索框图标不透明
			$(".searchDiv img").each(function() {
				$(this)[0].style.opacity = 1;
			});
		});
		//为搜索框添加鼠标移入移出事件
		$("#searchInput").mouseout(function() {
			//让搜索框图标透明
			$(".searchDiv img").each(function() {
				$(this)[0].style.opacity = 0;
			});
		});
		//为搜索框小图标添加鼠标移入事件
		$(".searchDiv img").each(function() {
			$(this).mouseover(function() {
				$(this)[0].style.opacity = 1;
			});
		});
		//为搜索表单添加提交事件
		$(".searchForm").submit(function() {
			//获取搜索框的值
			var word = $("#searchInput").val();
			//如果是访问社区，清空搜索关键词并提交搜索
			if (isGoCommunity == "true")
				$("#searchInput").val("");
			//若搜索框为空且不是访问社区，不提交搜索且搜索框左右抖动
			else if (word == "") {
				searchInputShake();
				return false;
			}
		});
		//初始化显示搜索范围图标
		changeSearchRange($("[name='searchRange']").val());
	});
	//访问社区
	function goCommunity() {
		//给判断是不是访问社区的变量赋值为true
		isGoCommunity = "true";
		//切换搜索范围为搜社区
		changeSearchRange("searchCommunity");
		//提交搜索
		$(".searchForm").submit();
		//给判断是不是访问社区的变量赋值为false
		isGoCommunity = "false";
		return false;
	}
	//搜索框左右抖动
	function searchInputShake() {
		var searchInputStyle = $(".searchDiv")[0].style;
		var arr = new Array("29.8", "29.6", "29.8", "30", "30.2", "30.4", "30.2", "30");
		var i = 0;
		setInterval(function() {
			if (i > arr.length * 2 - 1) return;
			searchInputStyle.left = arr[i % arr.length] + "%";
			i++;
		}, 20);
	}
	//壁纸中心div降落
	function wallpaperCenterDown() {
		var wallpaperCenterStyle = $(".wallpaperCenter")[0].style;
		var i = 99;
		setInterval(function() {
			if (i < 0) return;
			wallpaperCenterStyle.bottom = i + "%";
			i--;
		}, 1);
	}
	//壁纸中心div升起
	function wallpaperCenterUp() {
		var wallpaperCenterStyle = $(".wallpaperCenter")[0].style;
		var i = 0;
		setInterval(function() {
			if (i > 100) return;
			wallpaperCenterStyle.bottom = i + "%";
			i++;
		}, 1);
	}
</script>
</head>
<body style="background-size: 100%">
	<%
		//获取全部壁纸的图标
	String path = request.getRealPath("/wallpaper/icon");
	File wallpaperIcons[] = new File(path).listFiles();
	%>
	<!-- 右上角小图标 -->
	<div align="right" class="index">
		<c:if test="${sessionScope.user.userType=='admin'}">
			<a href="${pageContext.request.contextPath}/manage" title="系统管理">
				<img src="${pageContext.request.contextPath}/image/manage.jpg" />
			</a>
		</c:if>
		<a href="" title="壁纸中心" onclick="return openWallpaperCenter()">
			<img src="${pageContext.request.contextPath}/image/wallpaperCenter.jpg" />
		</a>
		<a href="" title="克里斯笔记社区" onclick="return goCommunity();">
			<img src="${pageContext.request.contextPath}/image/community.png" />
		</a>
		<a href="${pageContext.request.contextPath}/personalCenter" title="个人中心">
			<img src="${pageContext.request.contextPath}/image/personalCenter.jpg" />
		</a>
	</div>
	<!-- 搜索框 -->
	<div class="searchDiv">
		<form action="${pageContext.request.contextPath}/search"
			class="searchForm">
			<input type="text" id="searchInput" name="searchWord" autofocus="autofocus" onkeyup="getSearchCandidate()" />
			<!-- 搜索范围 -->
			<input type="text" name="searchRange" value="searchSelf" style="display: none" /> <input type="submit" style="display: none" />
		</form>
		<!-- 搜索范围图标 -->
		<a href="" class="searchSelf" onclick="return changeSearchRange('searchCommunity')">
			<img src="${pageContext.request.contextPath}/image/searchSelf.jpg" title="搜自己" />
		</a>
		<a href="" class="searchCommunity" onclick="return changeSearchRange('searchSelf')">
			<img src="${pageContext.request.contextPath}/image/searchCommunity.jpg" title="搜社区" />
		</a>
	</div>
	<!-- 候选项div -->
	<div class="candidateDiv">
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(0)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(1)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(2)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(3)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(4)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(5)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(6)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(7)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(8)"></a>
		</p>
		<p>
			<a href="" class="candidateA" onclick="return searchCandidate(9)"></a>
		</p>
	</div>
	<!-- 右上角返回图标 -->
	<div align="right" class="goBack" style="display: none; padding: 10px">
		<a href="" title="返回" onclick="return closeWallpaperCenter()">
			<img src="${pageContext.request.contextPath}/image/goBack.jpg" style="border-radius: 15px" />
		</a>
	</div>
	<!-- 壁纸中心 -->
	<div class="wallpaperCenter">
		<c:forEach var="wallpaperIcon" items="<%=wallpaperIcons%>">
			<a href="" onclick="return changeWallpaper('${wallpaperIcon.name}')">
				<img name="${wallpaperIcon.name}" />
			</a>
		</c:forEach>
	</div>
</body>
</html>